<script lang="ts" setup>

    import { ref,reactive} from 'vue'
    //事件
    //1,鼠标（click,dbclick,mousedown,mouseup,mousemove,mouseenter(mouseover),mouseleave(mouseout),comtextmenu（右键，菜单事件））---修饰符：prevent(阻止默认行为),stop(阻止事件冒泡)
    //2,键盘（keydown,keyup,keypress）---修饰符：enter(回车),esc(退出)，space(空格)
    //3,表单（input,change,focus,blur(失去焦点),select,submit）
    
    //4,窗口（scroll,resize）
    //5,自定义（自定义）
    //6,生命周期（created,mounted,updated,destroyed）
    //7,动画（transition）
    //8,路由（route）

    //事件修饰符（用.跟在事件后面）
    function dbclick(event:Event,a:number){
        // event.stopPropagation()
        console.log("dbclick",a,event.target);
    }
    function keydown(event:Event){
        console.log("keydown",event);
    }
    function f(){
        alert("baidu")
    }
    function f1(){
        //自己代码提交，把数据发给服务器（springboot)
        console.log("提交")
    }
</script>

<template>
    <div @dblclick="dbclick($event,1)" class="myoutdiv">
">
        <div v-on:dblclick.stop="dbclick($event,2)" class="mydiv">双击</div>
    </div>

    <a href="https://www.baidu.com" @click.prevent="f">百度</a><br>

    <form action="https://www.baidu.com" @submit.prevent="f1">

        <input @keydown.enter="keydown">按下键盘</input><br>
     
        <input type="text" @input="console.log($event)"><br>
        <button>提交</button>
    </form>
</template>
<style scoped>
.mydiv{
    width: 100px;
    height: 100px;
    background-color: palevioletred;
}
.myoutdiv{
    width: 150px;
    height: 150px;
    background-color: blue;
}
</style>
